import React, { useMemo, useRef, useState } from 'react';
import { View, StyleSheet, Switch } from 'react-native';
import { Layout, UI, useThemeColors, Feedback } from '@gaozh1024/rn-toolkit';

const { Snackbar } = Feedback;

const SnackbarTestScreen: React.FC = () => {
    const colors = useThemeColors();

    const styles = StyleSheet.create({
        section: { marginBottom: 16 },
        row: { flexDirection: 'row', alignItems: 'center', gap: 12, flexWrap: 'wrap' },
        col: { gap: 12 },
        card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
        bordered: { borderWidth: 1, borderColor: colors.border, borderRadius: 8, padding: 12 },
    });

    // 行为与样式配置
    const [message, setMessage] = useState<string>('已保存到草稿');
    const [durationStr, setDurationStr] = useState<string>('3000');
    const [actionText, setActionText] = useState<string>('撤销');
    const [safeArea, setSafeArea] = useState<boolean>(true);

    // 交互结果
    const [actionCount, setActionCount] = useState<number>(0);
    const [closeCount, setCloseCount] = useState<number>(0);
    const [lastAction, setLastAction] = useState<string>('-');

    const duration = useMemo(() => {
        const v = parseInt(durationStr);
        return Number.isFinite(v) ? v : 3000;
    }, [durationStr]);

    const showBasic = () => {
        Snackbar.show({
            message,
            duration,
            safeArea,
            onClose: () => setCloseCount(n => n + 1),
        });
    };

    const showWithAction = () => {
        Snackbar.show({
            message,
            duration,
            actionText,
            safeArea,
            onAction: () => {
                setActionCount(n => n + 1);
                setLastAction(`点击：${actionText}`);
            },
            onClose: () => setCloseCount(n => n + 1),
        });
    };

    const hideNow = () => Snackbar.hide();

    const autoHide1200 = () => {
        Snackbar.show({
            message: '短提示（1.2s）',
            duration: 1200,
            safeArea,
            onClose: () => setCloseCount(n => n + 1),
        });
    };

    const showSafeArea = (sa: boolean) => {
        Snackbar.show({
            message: sa ? '安全区：开启' : '安全区：关闭',
            duration,
            safeArea: sa,
            onClose: () => setCloseCount(n => n + 1),
        });
    };

    const longMessage = '这是一个较长的提示，用于验证两行展示与自动隐藏效果。这是一个较长的提示，用于验证两行展示与自动隐藏效果。';

    const showLongMessage = () => {
        Snackbar.show({
            message: longMessage,
            duration,
            safeArea,
            onClose: () => setCloseCount(n => n + 1),
        });
    };

    return (
        <Layout.Page
            headerShown
            headerProps={{ title: 'Snackbar 测试', backVisible: true }}
            padding={16}
            scrollable
            testID="SnackbarTestScreen"
        >
            {/* 行为与样式 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>行为与样式</UI.Text>
                    <View style={styles.col}>
                        <UI.Text children={'消息文案（message）'} />
                        <UI.Input
                            value={message}
                            onChangeText={setMessage}
                            placeholder="已保存到草稿"
                            testID="input-message"
                        />
                        <UI.Text children={'显示时长（duration，ms）'} />
                        <UI.Input
                            value={durationStr}
                            onChangeText={setDurationStr}
                            placeholder="3000"
                            keyboardType="numeric"
                            testID="input-duration"
                        />
                        <UI.Text children={'操作按钮文案（actionText）'} />
                        <UI.Input
                            value={actionText}
                            onChangeText={setActionText}
                            placeholder="撤销"
                            testID="input-action-text"
                        />
                    </View>
                    <View style={[styles.row, { marginTop: 12 }]}>
                        <UI.Text variant="body2" color="textSecondary">安全区（safeArea）</UI.Text>
                        <Switch value={safeArea} onValueChange={setSafeArea} testID="switch-safeArea" />
                    </View>
                </Layout.Card>
            </View>

            {/* 基础用法 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础用法</UI.Text>
                    <View style={styles.row}>
                        <UI.Button title="显示" onPress={showBasic} fullWidth testID="btn-show" />
                        <UI.Button title="显示（带操作按钮）" onPress={showWithAction} fullWidth testID="btn-show-with-action" />
                    </View>
                    <View style={[styles.row, { marginTop: 12 }]}>
                        <UI.Button title="自动隐藏（1.2s）" variant="outline" onPress={autoHide1200} fullWidth testID="btn-auto-hide-1200" />
                        <UI.Button title="隐藏" variant="outline" onPress={hideNow} fullWidth testID="btn-hide" />
                    </View>
                    <View style={[styles.bordered, { marginTop: 12 }]}>
                        <UI.Text variant="caption" color="subtext" mb={8}>交互结果：</UI.Text>
                        <UI.Text variant="body1" color="text" testID="text-action-count">操作点击次数：{actionCount}</UI.Text>
                        <UI.Text variant="body1" color="text" testID="text-close-count">关闭回调次数：{closeCount}</UI.Text>
                        <UI.Text variant="body1" color="text" testID="text-last-action">最后一次操作：{lastAction}</UI.Text>
                    </View>
                </Layout.Card>
            </View>

            {/* 安全区与长文案 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>安全区与长文案</UI.Text>
                    <View style={styles.row}>
                        <UI.Button title="显示（safeArea=true）" onPress={() => showSafeArea(true)} fullWidth testID="btn-safearea-true" />
                        <UI.Button title="显示（safeArea=false）" onPress={() => showSafeArea(false)} fullWidth testID="btn-safearea-false" />
                    </View>
                    <View style={[styles.row, { marginTop: 12 }]}>
                        <UI.Button title="显示长文案（两行）" variant="outline" onPress={showLongMessage} fullWidth testID="btn-long-message" />
                    </View>
                </Layout.Card>
            </View>
        </Layout.Page>
    );
};

export default SnackbarTestScreen;